<%--
  Created by IntelliJ IDEA.
  User: a.cabrera
  Date: 6/06/13
  Time: 14:11
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="basic"/>
    <g:javascript library="jquery"/>
    <g:javascript src='OpenLayers.js'/>

    <script type="text/javascript"> <g:render template="../js/funcionesDemograficas.js"/> </script>
    <script type="text/javascript"> <g:render template="../js/funcionesSalaSituacional.js"/> </script>
    <script type="text/javascript" src="${createLinkTo(dir:'js/jquery' ,file:'jquery-1.7.1.js')}"></script>
    <script type="text/javascript" src="${createLinkTo(dir:'js/jquery' ,file:'jquery-ui-i18n.min.js')}"></script>
    <jqui:resources themeCss="../css/jquery/jquery-ui-1.8.16.custom.css"/>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'estilo.css')}"/>

    <g:javascript>
    window.alert = null;
    delete window.alert;

    var $j = jQuery.noConflict();
        $j(document).ready(function() {
            $j('#diagnostico').autocomplete({
                 source: '<g:createLink action="diagnosticosFinder"/>'
            });
        });

        function runEffect() {
            var src= $j('#hidder').attr('src').replace( /^.*?([^\/]+)\..+?$/, '$1' );
            var form_values = $j("#sala_form :input").get();
            if (src == "close") {
                $j('#hidder').attr('src',"/sos/images/open.png");
            }else{
                $j('#hidder').attr('src',"/sos/images/close.png");
            }

            if ($j("#entidresid").css('visibility') == 'hidden') {
                $j.each(form_values,function(intIndex, objValue){
                    $j("#"+objValue.name).css("visibility", "visible");
                })
                $j("#salaSituacionalEstado").show();
                $j("#salaSituacionalMunicipio").show();
                $j("#salaSituacionalParroquia").show();
                $j("#salaSituacionalFecha").show();
                $j("#salaSituacionalFechaInicio").show();
                $j("#salaSituacionalFechaFin").show();
                $j("#salaSituacionalEdad").show();
                $j("#salaSituacionalSexo").show();
                $j("#salaSituacionalDiagnostico").show();
                $j("#clear_form").show();
            }else {
                $j.each(form_values,function(intIndex, objValue){
                    $j("#"+objValue.name).css("visibility", "hidden");
                })
                $j("#salaSituacionalEstado").hide();
                $j("#salaSituacionalMunicipio").hide();
                $j("#salaSituacionalParroquia").hide();
                $j("#salaSituacionalFecha").hide();
                $j("#salaSituacionalFechaInicio").hide();
                $j("#salaSituacionalFechaFin").hide();
                $j("#salaSituacionalEdad").hide();
                $j("#salaSituacionalSexo").hide();
                $j("#salaSituacionalDiagnostico").hide();
                $j("#clear_form").hide();
            }
            var toggleWidthFilters = $j("#Filtros").width() == 200 ? "1335px" : "200px";
            var toggleWidthMap = $j("#MyMap").width() == 750 ? "1325px" : "750px";
            var toggleHeightMap = $j("#MyMap").height() == 400 ? "500px" : "400px";
            $j("#Filtros").animate({ width: toggleWidthFilters });
            $j("#MyMap").animate({ width: toggleWidthMap });
            $j("#MyMap").animate({ height: toggleHeightMap });
            if ($j("#MyMap").css("left") == "625px"){
                $j("#MyMap").css("left","40")
                $j("#Titulo").css("left","500")
                $j("#Titulo").css("top","900")
            }else{
                $j("#MyMap").css("left","625")
                $j("#Titulo").css("left","700")
                $j("#Titulo").css("top","800")
            }
            setTimeout( function() { map.updateSize();}, 500);
        }

        jQuery.fn.reset = function () {
            $j(this).each (function() { this.reset(); });
        }

        function clear_form(){
            $j("#sala_form").reset();
        }

        function showPatients(){
            clearMarkers();
            var sortable = new Array();
            lista = $j("#patientList").attr("value");
            if (lista != "[]"){
                var auxLista = lista.substring(1, lista.length-1);
                var pacientes = auxLista.split("], ");
                $j.each(pacientes,function(indice,valor){
                    var paciente = valor.split(",");
                    sortable.push({
                        "Id"            :   paciente[0].substring(1, paciente[0].length),
                        "Estado"        :   paciente[1],
                        "Municipio"     :   paciente[2],
                        "Parroquia"     :   paciente[3],
                        "Punto"         :   paciente[4],
                        "Edad"          :   paciente[5],
                        "Sexo"          :   paciente[6],
                        "Diagnostico"   :   paciente[7]
                    });
                });
            print(sortable)
            }else{
                alert("No existen pacientes con los parametros especificados")
            }
        }

        function construirLocalidad(Estado, Municipio, Parroquia){
            var localidad = '<b>Estado: '+Estado+'<b><br/>'+
                            '<b>Municipio: '+Municipio+'<b><br/>'+
                            '<b>Parroquia: '+Parroquia+'<b><br/>'
            return localidad
        }

        function construirCasos(Edad, Sexo, Diagnosticos){
            var caso = '<b>Edad: '+Edad+'<b><br/>'+
                       '<b>Sexo: '+Sexo+'<b><br/>'+
                       '<b>Diagnostico: '+Diagnosticos+'<b><br/>';
            return caso
        }

        function print(sortable){
            sortable.sort(function(obj1, obj2){
	            return obj1.Id - obj2.Id;
            });
            var color = sortable[0].Sexo;
            var id_actual = sortable[0].Id;
            var localidad = construirLocalidad(sortable[0].Estado,sortable[0].Municipio,sortable[0].Parroquia);
            var paciente = construirCasos(sortable[0].Edad,sortable[0].Sexo,sortable[0].Diagnostico);
            var mensaje = localidad+paciente;
            dibujarPuntos(sortable[0].Punto, mensaje,color)
            for (var i=1;i<sortable.length;i++){
                if(sortable[i].Id === id_actual){
                    color = "";
                    mensaje = mensaje + construirCasos(sortable[i].Edad,sortable[i].Sexo,sortable[i].Diagnostico)
                }else{
                    id_actual = sortable[i].Id;
                    color = sortable[i].Sexo;
                    var localidad = construirLocalidad(sortable[i].Estado,sortable[i].Municipio,sortable[i].Parroquia);
                    var paciente = construirCasos(sortable[i].Edad,sortable[i].Sexo,sortable[i].Diagnostico);
                    var mensaje = localidad+paciente;
                }
            dibujarPuntos(sortable[i].Punto, mensaje, color)
            }
        }

        function generarEstadisticas(){
            var fecha_actual = new Date();

            var dia_inicio = $j('#fecha_inicio_day').val();
            var mes_inicio = $j('#fecha_inicio_month').val();
            var ano_inicio = $j('#fecha_inicio_year').val();

            var dia_fin = $j('#fecha_fin_day').val();
            var mes_fin = $j('#fecha_fin_month').val();
            var ano_fin = $j('#fecha_fin_year').val();

            if (parseInt(ano_fin) > fecha_actual.getFullYear() || parseInt(ano_inicio) > fecha_actual.getFullYear()) {
                alert ("El año de la Fecha Fin es superior al año Actual");
            }else{
                if (parseInt(ano_inicio) > parseInt(ano_fin)) {
                    alert ("El año de la Fecha Inicio es superior al año de la Fecha Fin")
                } else{
                    if ((parseInt(ano_inicio) === parseInt(ano_fin)) && (parseInt(mes_inicio) > parseInt(mes_fin))) {
                        alert ("El mes de la Fecha Inicio es superior al mes de la Fecha Fin")
                    }
                    else{
                        if ((parseInt(ano_inicio) === parseInt(ano_fin)) && (parseInt(mes_inicio) === parseInt(mes_fin)) && (parseInt(dia_inicio) > parseInt(dia_fin))) {
                            alert ("El dia de la Fecha Inicio no puede ser superior al de la Fecha Fin")
                        }else{
                             estadistica = $j("#estadisticas").attr("value");
                             ${remoteFunction(
                                controller: 'salaSituacional',
                                action: 'setEstadisticas',
                                onComplete: 'showPatients()',
                                asynchronous: 'false',
                                update: 'Indicadores',
                                params: '\'estadistica=\' + estadistica')}
                        }
                    }
                }
            }
        }
    </g:javascript>
</head>

<body onload="showMap()">
<div id="menu1">
    <ul>

        <li>
            <a class="selected">Historia Integral</a>
        </li>
    </ul>
</div>
<div class="estados_coordenadas" id="estados_coordenadas"></div>
<div class="municipios_coordenadas" id="municipios_coordenadas"></div>
<div class="parroquias_coordenadas" id="parroquias_coordenadas"></div>

<div id="nivel1">
    <div id="nivel2">
        <div id="contenido">
                <div id="Estadisticas" class="panelSalaSituacional">
                    <fieldset>
                        <legend><g:message code="salaSituacional.estadisticas"/></legend>
                        <div id="Indicadores">
                            <p style="background-color:#f7f7f7;">
                                <label for="cantidadCasos"><g:message code="salaSituacional.cantidadCasos"/></label>
                                <g:textField id="CifraCantidadCasos" name="cifraCantidadCaso" optionKey="id" disabled="true"/>
                                <label for="estadosAfectados"><g:message code="salaSituacional.estadosAfectados"/></label>
                                <g:textField id="cifraEstadosAfectados" name="cifraEstadosAfectados" optionKey="id" disabled="true"/>
                                <label for="municipiosAfectados"><g:message code="salaSituacional.municipiosAfectados"/></label>
                                <g:textField id="cifraMunicipiosAfectados" name="cifraMunicipiosAfectados" optionKey="id" disabled="true"/>
                                <label for="parroquiasAfectadas"><g:message code="salaSituacional.parroquiasAfectadas"/></label>
                                <g:textField id="cifraParroquiasAfectadas" name="cifraParroquiasAfectadas" optionKey="id" disabled="true"/>
                            </p>
                            <p style="background-color:#f7f7f7;">
                                <label for="masculino"><g:message code="salaSituacional.porcentajeMasculino"/></label>
                                <g:textField id="cifraMasculino" name="cifraMasculino" optionKey="id" disabled="true"/>
                                <label for="femenino"><g:message code="salaSituacional.porcentajeFemenino"/></label>
                                <g:textField id="cifraFemenino" name="cifraFemenino" optionKey="id" disabled="true"/>
                                <label for="edad"><g:message code="salaSituacional.edadPromedio"/></label>
                                <g:textField id="cifraEdad" name="cifraEdad" optionKey="id" disabled="true"/>
                                <label for="diagnosticos"><g:message code="salaSituacional.diagnosticosIdentificados"/></label>
                                <g:textField id="cifraDiagnosticos" name="cifraDiagnosticos" optionKey="id" disabled="true"/>
                            </p>
                        </div>
                    </fieldset>
                </div>
                <g:formRemote  url="[action: 'filtrar']" update="pacientes" name="sala_form" id="sala_form" enctype="multipart/form-data" class="panelSalaSituacional" onComplete="generarEstadisticas()" asynchronous="false">
                <div id="contentPanel">
                    <fieldset>
                    <legend>
                        <img id="hidder" class="openCluster" src="/sos/images/close.png" onclick="runEffect()"  style="width: 15px; height: auto;">
                        <g:message code="salaSituacional.filtros"/>
                    </legend>
                    <div style="clear:both"></div>
                        <div id="Filtros">
                        <p>
                            <label id="salaSituacionalEstado" for="salaSituacionalEstado"><g:message code="salaSituacional.estado"/></label>
                            <g:select name="entidresid" class="selectci" from="${estados}" optionKey="id"
                                      optionValue="nombre" noSelection="['-1' : 'Seleccione Estado']" onchange="updateMunicipiosReside(this.value)"/>
                        </p>
                        <p>
                            <label id="salaSituacionalMunicipio" for="salaSituacionalMunicipio"><g:message code="salaSituacional.municipio"/></label>
                            <g:select name="municresid" class="selectci" noSelection="['-1' : 'Seleccione Municipio']" onchange="updateParroquiaReside(this.value)" />
                        </p>
                        <p>
                            <label id="salaSituacionalParroquia" for="salaSituacionalParroquia"><g:message code="salaSituacional.parroquia"/></label>
                            <g:select name="direccion" class="selectci" disabled="false" noSelection="['-1' : 'Seleccione Parroquia']" onchange="updateCallesReside(this.value)"/>
                        </p>
                        <p>
                            <label id="salaSituacionalFecha" for="salaSituacionalFecha"><g:message code="salaSituacional.fechaTitulo"/></label>
                        </p>
                        <p>
                            <label id="salaSituacionalFechaInicio" for="salaSituacionalFechaInicio"><g:message code="salaSituacional.fechaInicio"/></label>
                            <g:datePicker name="fecha_inicio" default="none" precision="day" noSelection="[null :'']" relativeYears="[-2..7]" />
                        </p>
                        <p>
                            <label id="salaSituacionalFechaFin" for="salaSituacionalFechaFin"><g:message code="salaSituacional.fechaFin"/></label>
                            <g:datePicker name="fecha_fin" default="none" precision="day" noSelection="[null :'']" />
                        </p>
                        <p>
                            <label id="salaSituacionalEdad" for="salaSituacionalEdad"><g:message code="salaSituacional.edad"/></label>
                            <g:select name="edad" class="selectci"
                                      from="['Entre 0 y 14 años',
                                             'Entre 15 y 29 años',
                                             'Entre 30 y 44 años',
                                             'Entre 45 y 59 años',
                                             'Mas de 60 años'
                                            ]"
                            noSelection="[null : 'Seleccione el rango']"/>
                        </p>
                        <p>
                            <label id="salaSituacionalSexo" for="salaSituacionalSexo"><g:message code="salaSituacional.sexo"/></label>
                            <g:select name="sexo" class="selectci" from="['Masculino', 'Femenino']"
                                      noSelection="[null : 'Seleccione el sexo']"/>
                        </p>
                        <div class="ui-widget">
                            <p>
                                <label id="salaSituacionalDiagnostico" for="salaSituacionalDiagnostico"><g:message code="salaSituacional.diagnostico"/></label>
                                <g:textField id="diagnostico" name="diagnostico" optionKey="id"/>
                            </p>
                        </div>
                        <p>
                            <g:submitButton  id="submit_form" name="submit_form"   value="${message(code:'salaSituacional.filtrar')}" class="boton_submit"/>
                        </p>
                        </div>
                    </fieldset>
                </div>
                <div id="MyMap" style="width: 750;
                height: 400;
                position: absolute;
                left: 625px;
                top: 390px;
                border-style: solid;
                border-color: #c1c1c1;">

                </div>
                <div id="Titulo" style="width: 500;
                height: 50;
                position: absolute;
                left: 750px;
                top: 850px;">
                <legend>Haga click sobre el mapa para buscar pacientes cercanos</legend>
                </div>

                <div id="pacientes" value=""></div>
                </g:formRemote>
                <g:submitButton  id="clear_form" name="clear_form" value="${message(code:'salaSituacional.init')}" onclick="clear_form()" style="
                display:inline-block;
                font-size:14px;
                color:#3f3f3f;
                padding: 7px 15px;
                background:#f5cb59 url(../images/bkg_boton1.gif) repeat-x;
                background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4e2b3), to(#f5c645));
                background-image: -webkit-linear-gradient(top, #f4e2b3, #f5c645);
                background-image: -moz-linear-gradient(top, #f4e2b3, #f5c645);
                background-image: -ms-linear-gradient(top, #f4e2b3, #f5c645);
                background-image: -o-linear-gradient(top, #f4e2b3, #f5c645);
                color:#3f3f3f;
                border:solid 1px #dddddd;
                text-decoration:none;
                margin: 10px;
                margin-left:20px;
             "/>
        </div>
    </div>
</body>
</html>
